<template>
  <div>
    <!-- 搜索头部 -->
    <van-search
      v-model="value"
      shape="round"
      show-action
      label="商品"
      placeholder="搜索鲜花、蛋糕、礼品"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 历史记录 -->
    <div class="history">
      <div class="record">
        <p>历史记录</p>
        <p @click="remove">清空历史记录</p>
      </div>
       <div class="historys">
         <div class="his" v-show="!history.length">暂无搜索历史记录</div>
         <div class="his" @click="onHistory(his)" v-for="his in history" :key="his" >
           {{ his  }}
         </div>
       </div>
    </div>
    <!-- 搜索底部 -->
  <tabbar />
  </div>
</template>
<script>
import tabbar from '../../components/tabbar.vue'
export default {
  components: { tabbar },
  data () {
    return {
      // 这个是搜索的关键字
      value: '',
      // 先取缓存中的历史记录 如有有就处理一下 没有的话就给一个空数组
      history: localStorage.getItem('his')
        ? JSON.parse(localStorage.getItem('his'))
        : []
    }
  },
  methods: {
    remove () {
      // 清空历史记录
      localStorage.removeItem('his')
      this.history = localStorage.getItem('his')
        ? JSON.parse(localStorage.getItem('his'))
        : []
    },
    onHistory (his) {
      // 点击历史搜索记录 进去结果页
      this.value = his
      this.onSearch()
    },
    // 点击搜索执行的代码
    onSearch () {
      // 存储我们的搜索记录 执行顺序是先取 在操作我们的数组 在存进去
      let his = localStorage.getItem('his')
        ? JSON.parse(localStorage.getItem('his'))
        : []
      his.unshift(this.value)
      // 去重
      his = [...new Set(his)]
      // 如果搜索记录大于十条那就只能做多十条
      if (his.length >= 10) {
        his.length = 10
      }
      // 在存回去  点击进入结果页 并传入搜索关键字 判断如果没输入关键字就不跳转 也不存
      if (this.value) {
        localStorage.setItem('his', JSON.stringify(his))
        this.$router.push({
          path: '/searchRedult',
          query: {
            k: this.value
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.history{
  margin-top: 10px;
  padding: 15px;
  p{
    font-size: 14px;
  }
  .record{
    display: flex;
    justify-content: space-between;
  }
}
.historys{
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
 .his{
  padding: 10px 15px;
  font-size: 12px;
  background-color: #E9ECF0;
  margin-top: 10px;
  margin-left: 10px;

 }
}
</style>
